<template>
  <div class="content">
    <div class="left">
      <el-tabs tab-position="left" style="height: 200px" class="demo-tabs">
        <el-tab-pane label="导出">
          <el-select v-model="selectProject" placeholder="Select" size="small" style="width: 240px">
            <el-option v-for="item in projectNames" :key="item" :label="item" :value="item" />
          </el-select>
        </el-tab-pane>
        <el-tab-pane label="依赖查看">Config</el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">

    </div>
  </div>

</template>

<script setup lang="ts">
import LogicFlow from '@logicflow/core';

import { onMounted, ref } from 'vue';

const data: LogicFlow.GraphConfigData = {
  // 节点
  nodes: [
    {
      id: "50",
      type: 'rect',
      x: 100,
      y: 150,
      text: '你好',
    },
    {
      id: "21",
      type: 'circle',
      x: 300,
      y: 150,
    },
  ],
  // 边
  edges: [
    {
      type: 'polyline',
      sourceNodeId: "50",
      targetNodeId: "21",
    },
  ],
};

let logDIv: HTMLDivElement

let creatErrorLogItem = (msg: string) => {
  let p = document.createElement('p');
  p.style.color = 'red';
  p.innerText = msg;
  return p
}
let creatWarningLogItem = (msg: string) => {
  let p = document.createElement('p');
  p.style.color = 'yellow';
  p.innerText = msg;
  return p
}
let creatInfoLogItem = (msg: string) => {
  let p = document.createElement('p');
  p.style.color = 'balck';
  p.innerText = msg;
  return p
}
function addLog(level: number, msg: string) {
  if (logDIv.children.length > 100) {
    logDIv.removeChild(logDIv.children[0]);
  }
  if (level === 1) {
    logDIv.appendChild(creatInfoLogItem(msg));
    return;
  }
  if (level === 2) {
    logDIv.appendChild(creatWarningLogItem(msg));
    return;
  }
  if (level === 3) {
    logDIv.appendChild(creatErrorLogItem(msg));
    return;
  }
}


//导出选项
let projectNames:string[] = []
let selectProject = ref("")

onMounted(() => {
  logDIv = document.querySelector('.log') as HTMLDivElement;
  const lf = new LogicFlow({
    container: document.querySelector('#container') as HTMLElement,
    stopScrollGraph: true,
    stopZoomGraph: true,
    width: 800,
    height: 500,
    grid: {
      type: 'dot',
      size: 20,
    },
  });
  lf.render(data);

  let ws = new WebSocket('ws://localhost:9999/export');
  ws.onopen = function () {
    addLog(1, '连接成功');
  };
  ws.onclose = function (e) {
    addLog(1, "连接关闭");
  };
  ws.onerror = function (e) {
    addLog(3, "连接失败");
  };
  ws.onmessage = function (e) {
    addLog(1, e.data);
  };
});
</script>

<style scoped>
.log {
  width: 800px;
  height: 500px;
  border: 1px solid gray;
  overflow: auto;
}

.content {
  display: flex;
}

.left {
  border-right: 1px solid gray;
  flex: 1;
}

.right {
  width: 400px;
}
</style>
